import React, { Component } from 'react'
import Item from '../Item'
import PropTypes from 'prop-types'

export default class List extends Component {
  static propTypes = {
    changeChecked: PropTypes.func.isRequired,
    delTodo: PropTypes.func.isRequired,
    todos: PropTypes.array.isRequired
  }

  handleChecked = (e) => {
    this.props.checkAll(e.target.checked)
  }

  render() {
    const { todos, changeChecked ,delTodo } = this.props
    return (
      <section className="main">
        <input id="toggle-all" className="toggle-all" type="checkbox" onClick={this.handleChecked} />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
          {todos.map(item => (
            <Item key={item.id} {...item} changeChecked={changeChecked} delTodo={delTodo}></Item>
          ))}
        </ul>
      </section>
    )
  }
}
